<template >
    <van-icon :name="value===1? 'good-job':'good-job-o'" :class="{
        likes: value===1
    }" 
    :loading="loading"
    @click="operateLikes"/>
</template>
<script>
import { addLikes, cancleLikes} from "@/apis/article"
import { showFailToast, showSuccessToast } from "vant"
export default {
    props: {
        value: {
            type:[Number, Boolean],
            required:true
        },
        artId: {
            type: [Number, String, Object],
            required: true
        }
    },
    data() {
        return {
            loading:false
        }
    },
    methods: {
        async operateLikes() {
            this.loading = true
            try {
                let status = -1;
                if (this.value === -1) {
                    const data = await addLikes(this.artId)
                    console.log(data);
                    status = 1
                } else {
                    const data = await cancleLikes(this.artId)
                    console.log(data);
                }
                showSuccessToast(status===1? '点赞成功':'取消点赞')
                this.loading = false
                this.$emit('input', !this.value)
            } catch (error) {
                showFailToast('点赞失败')
                console.log(error);
            }
        }
    }
}
</script>
<style lang="less" scoped>

    .likes {
        color: #e564af;
    }

    
</style>